<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript" src="../jqtool/jquery.tools.min.js">
        </script>
        <style type="text/css">
            
            /* the input field */ .date {
                border: 1px solid #ccc;
                font-size: 10px;
                padding: 4px;
                text-align: center;
                width: 140px;
				max-width:140px;
                -moz-box-shadow: 0 0 10px #eee inset;
            } #calroot {
                /* place on top of other elements. set a higher value if nessessary */
                z-index: 1;
                margin-top: -22px;
                width: 370px;
            } #calbody {
                clear: both;
                font-family: sans-serif;
                width: 364px;
                font-size: 13px;
                border: 1px solid #BDC8D2;
                border-width: 1px 1px 0;
                background: #F5F9FF url(./img/gradient/h300.png) 0 37px repeat-x;
                -moz-box-shadow: 0 0 10px 0px #ccc;
                -webkit-box-shadow: 0 0 10px 0px #ccc;
            } #calhead {
                padding-left: 195px;
            } #caltitle {
                font-family: sans-serif;
                text-align: center;
                font-size: 14px;
                float: left;
                width: 130px;
            } #calnext, #calprev {
                display: block;
                width: 20px;
                height: 20px;
                background: transparent url(./img/dateinput/prev.gif) no-repeat scroll center center;
                float: left;
                cursor: pointer;
            } #calnext {
                background-image: url(./img/dateinput/next.gif);
                float: right;
            } #calprev.caldisabled, #calnext.caldisabled {
                visibility: hidden;
            } #caldays span {
                display: block;
                float: left;
                width: 52px;
                text-align: center;
                font-weight: bold;
                padding: 4px 0;
                font-size: 11px;
                color: #7e7e7e;
                line-height: 18px;
                background: #fff url(./img/gradient/h80.png) repeat-x;
            } #calweeks {
            } .calweek {
                clear: left;
                height: 50px;
                border-bottom: 1px solid #BDC8D2;
                border-top: 1px solid #fff;
            } .calweek a {
                display: block;
                float: left;
                width: 50px;
                height: 50px;
                text-decoration: none;
                font-size: 15px;
                text-align: center;
                line-height: 50px;
                color: #000;
                border-right: 1px solid #fff;
                border-left: 1px solid #BDC8D2;
                text-shadow: 1px 1px 1px #fff;
            }
            
            a.calsunday {
                border-left: 1px solid transparent;
                color: #900;
                background-color: #f2f2f2;
            } .calweek a:hover, .calfocus {
                background: #fff url(./img/gradient/h80.png) repeat-x;
            } .calsun {
                color: red;
            }
            
            a.caloff {
                color: #999;
                background: #eee url(./img/gradient/h80.png) repeat-x;
            }
            
            a.caloff.calfocus {
                background-color: #ddd;
            } .caldisabled {
                background-color: #efefef !important;
                color: #ccc !important;
                cursor: default;
            } .caloff:hover {
                background-color: rgb(245, 245, 250);
            } #caltitle select {
                font-size: 10px;
            }
            
            /* current day */ #calcurrent {
                background-color: #498CE2;
                color: #fff;
                text-shadow: 0 1px 0 #000;
                border: 0;
                width: 52px;
                background-image: none;
                -moz-box-shadow: inset 0 0 10px 0px #000;
            }
            
            /* today */ #caltoday {
                background-color: #666;
                color: #fff;
                text-shadow: 0 1px 0 #000;
            }
        </style>
        <style type="text/css">
            .date {
                width: 357px;
            } #calhead {
                padding-left: 95px;
            } #caltitle {
                background-color: #fff;
            } #calnext {
                float: left;
            }
        </style>
        <script type="text/javascript">
        </script>
    </head>
    <body>
        <!-- 0 value will display the current date formatted with the default
        formatter -->
        <div>
            <input type="date" name="test" value="0" />
        </div>
        <script>
            // the CN localization
            $.tools.dateinput.localize("cn", {
                months: '一月,二月,三月,四月,五月,六月,七月,八月,九月,十月,十一月,十二月,',
                shortMonths: '一月,二月,三月,四月,五月,六月,七月,八月,九月,十月,十一月,十二月,',
                days: '星期一,星期二,星期三,星期四,星期五,星期六,星期日',
                shortDays: '星期一,星期二,星期三,星期四,星期五,星期六,星期日'
            });
            
            // dateinput initialization. the language is specified with lang- option
            $(":date").dateinput({
                lang: 'cn',
                format: 'dddd dd, mmmm yyyy',
                offset: [30, 0]
            });
        </script>
    </body>
</html>
